<template>
  <div class="page">
    <a-form
      :model="formSearchParams"
      :style="{ marginBottom: '20px' }"
      layout="inline"
      @submit="doSearch"
    >
      <a-form-item field="userName" label="预约标题">
        <a-input v-model="formSearchParams.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item field="userProfile" label="预约姓名">
        <a-input v-model="formSearchParams.workName" placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item field="userProfile" label="日期">
        <a-range-picker
          style="width: 360px; margin: 0 24px 24px 0"
          show-time
          :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
          format="YYYY-MM-DD HH:mm"
        />
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          style="width: 100px"
          @click="aaa"
        >
          搜索
        </a-button>
      </a-form-item>
    </a-form>
    <div class="box">
      <a-table
        :columns="columns"
        :data="dataList"
        :pagination="{
          showTotal: true,
          pageSize: searchParams.pageSize,
          current: searchParams.current,
          total,
        }"
        @page-change="onPageChange"
      >
        <template #userAvatar="{ record }">
          <a-image width="64" :src="record.userAvatar" />
        </template>
        <template #createTime="{ record }">
          {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template #updateTime="{ record }">
          {{ dayjs(record.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template #optional="{ record }">
          <a-space>
            <a-button status="danger" @click="doDelete(record)">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { dayjs } from "@arco-design/web-vue/es/_utils/date";
import {
  deletePunchInRecordsUsingPost,
  listPunchInRecordsByPageUsingPost,
} from "@/api/punchInRecordsController";

const formSearchParams = ref({});
// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 10,
};

const searchParams = ref({
  ...initSearchParams,
});
const dataList = ref([]);
const total = ref(0);

/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listPunchInRecordsByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

/**
 * 执行搜索
 */
const doSearch = () => {
  searchParams.value = {
    ...initSearchParams,
    ...formSearchParams.value,
  };
};

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
const onPageChange = (page) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

/**
 * 删除
 * @param record
 */
const doDelete = async (record) => {
  if (!record.id) {
    return;
  }

  const res = await deletePunchInRecordsUsingPost({
    id: record.id,
  });
  if (res.data.code === 0) {
    loadData();
  } else {
    message.error("删除失败，" + res.data.message);
  }
};

const aaa = () => {
  console.log(dataList.value);
};
/**
 * 监听 searchParams 变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  loadData();
});

// 表格列配置
const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "打卡人姓名",
    dataIndex: "workName",
  },
  {
    title: "打卡位置",
    dataIndex: "address",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    slotName: "createTime",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    slotName: "updateTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.box {
  width: 97%;
  height: 100%;
}
</style>
